<template>
	<view class="">
		<view class="notice-box">

			<view class="row1">
				<image :src="$BASE_URL + piclist[0]" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
				<text style="margin: 0 20rpx;">
					{{ '意外保险'}}
					<!-- {{ orderDeatil.goods_id.split('').find(orderDeatil.item[0].goods_id)}} -->
				</text>
				<image :src="$BASE_URL + piclist[1]" mode="aspectFill" style="width: 32rpx;height: 32rpx;"
					@click="popUp = true"></image>
			</view>

			<view class="notice-box__content">
				<view class="notice-item u-flex" style="justify-content: space-between;	margin-bottom: 20rpx;">
					<text class="" style="font-size: 32rpx;color: #3D3D3D;"> 意外保险￥{{insurance.goods_amount || 0}}</text>
					<text class=""
						style="font-size: 28rpx;color: #333;margin-right: 10rpx;">{{insurance.status==0?'待支付':insurance.status == 1?'已付款':insurance.status == 2?'已退款':''}}</text>
				</view>
				<view class="notice-item--center u-flex">
					<text class="title">订单编号：</text>
					<text class="detail u-ellipsis-1">{{ insurance.order_sn || ''}}</text>
					<button class="u-reset-button copy-btn" @tap="onCopy(insurance.order_sn)">复制</button>
				</view>
				<view class="notice-item u-flex">
					<text class="title">创建时间：</text>
					<text class="detail">{{ creatTime || ''}}</text>
				</view>
				<view class="buy-btn" @click="payOrder()" v-if="insurance.status==0">
					立即购买
				</view>
			</view>
		</view>


		<u-popup v-model="popUp" mode='center' border-radius="30">
			<view class="center-content">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="center-content-title">
						碎屏险服务协议
					</view>
					<view class="center-content-item">
						<text>一、碎屏险服务指:协议期间设备发生非人为原因(经官方鉴定)造成的外屏意外损坏，符合碎屏险服务理赔范围，由甲方提供一次更换屏幕的保障服务。</text>
					</view>
					<view class="center-content-item">
						<text>二、本条款仅适用于乙方通过本协议租赁的在租期内的租赁设备，有效期12个月，若租赁合同提前结束，则保障服务立即终止。</text>
					</view>
					<view class="center-content-item">
						<text>三、支付方式与碎屏险服务约定:
							1、根据设备型号及配置，乙方需向甲方支付相应碎屏险服务费，在乙方签署租赁协议的同时一次性支付。
							2、退租时或者碎屏险服务到期时，无论碎屏险服务是否启动，该碎屏险服务费均不予退还。
							3、维修使用备件为原件或等同原装质量。
						</text>
					</view>
					<view class="center-content-item">
						<text> 四、碎屏维修范围及实施:
							1.协议内，设备经官方工程师检测确认后属于非人为原因造成的产品外屏碎屏，可申请启动碎屏险保障服务(悟空租售后服务专线:{{kefuphone}})由乙方去官方授权门店进行维修，维修完成后将官方出具的维修单及维修发票寄送给甲方，甲方收到后报销支付外屏维修费用。
							2、甲乙双方约定该碎屏险服务在协议期间仅享受一次免费修理，修理完成后，视为本次碎屏险服务结束。乙方若需要续保，则须重新向甲方购买该服务。
							3、保障服务范围:因意外产生的外屏碎屏，可免费更换。

						</text>
					</view>
					<view class="center-content-item">
						<text> 五、免责条款:
							1、主板损坏变形导致不开机的碎屏，进液导致的爆屏，边框变形的碎屏，设备除外屏幕外其他部位出现故障(如:进水，边框，后盖，排线，主板，指纹识别键等)不属于本协议保修范围。
							2、
							我们对任何间接损失附带损失，包括但不限于产品造成投保人、被保险人或其他任何个人、法人或其他组织的人身伤害、精神损害、财产损失或任何经济性利益的损失;无法使用导致业务损失，利润损失，数据遗失，信息丢失，误工费等，不承担任何形式的间接损失与责任。
							3、由地震，火灾，洪水，泥石流，火山，台风等自然灾害形成不可抗力导致产品损坏。

						</text>
					</view>
					<view class="center-content-item">
						<text> 六、友情提示
							1、维修之前请做好产品数据备份，避免数据丢失。
							2、协议期间，全新设备有产品质量问题，按照厂商规定的条例进行保修。如有不明白之处请详询悟空租售后服务专线:{{kefuphone}}
						</text>
					</view>
					<view class="center-content-title">
						意外保险介绍
					</view>
					<view class="center-content-item">
						<text style="" class="title">提示:</text>
						<text>{{orderDeatil.severContent||'暂无'}}</text>
					</view>

					<view class="Iknow" @click="popUp = false">
						我知道了
					</view>
				</scroll-view>



			</view>



		</u-popup>

		<u-popup v-model="payTypeShow" mode='bottom' border-radius="14">

			<view class="orderContract">
				<view class="" style="margin-top: 20rpx;">
					<view class="" style="font-size: 34rpx;text-align: center;">
						应付租金
					</view>
					<view class=""
						style="margin: 20rpx 0;text-align: center;color: #FF4747;font-size: 36rpx;font-weight: 600;">
						￥{{insurance.goods_amount || 0}}元
					</view>

					<view class="" style="display: flex;justify-content: center;margin-top: 40rpx;">
						<image v-if="QRbtn== ''" src="../../../static/images/defaultQR.png" mode=""
							style="width: 400rpx;height: 400rpx;">
						</image>
						<!-- 微信支付 -->
						<image v-if="QRbtn == 2" :src="$BASE_URL + payQr[0]" mode=""
							style="width: 400rpx;height: 400rpx;">
						</image>
						<!-- 支付宝支付 -->
						<image v-if="QRbtn  == 1" :src="$BASE_URL + payQr[1]" mode=""
							style="width: 400rpx;height: 400rpx;">
						</image>
					</view>

					<view class="selectBtn">

						<!-- 	<view class="" v-if="QRbtn==''">
						请选择支付您的方式获取支付二维码
					</view> -->
						<view class="alipayQR QRbtn"
							:style="{backgroundColor:QRbtn==1? '#1678FF':'#F9F9F9',color:QRbtn ==1? '#fff':'#666'}"
							@click="selectBtn(1)">
							<view class="notselected" v-if="QRbtn != 1">

							</view>

							<image v-if="QRbtn == 1" src="../../../imgs/pay/activeIcon.png" mode=""
								style="width: 40rpx;height: 40rpx;">
							</image>

							<image v-if="QRbtn == 1" src="../../../imgs/pay/alipayActive.png" mode=""
								style="width: 36rpx;height: 36rpx;">
							</image>

							<image v-if="QRbtn != 1" src="../../../imgs/pay/alipayIcon.png" mode=""
								style="width: 36rpx;height: 36rpx;">
							</image>
							<view>支付宝支付</view>
						</view>
						<view class="wechatQR QRbtn"
							:style="{backgroundColor:QRbtn==2? '#15ba11':'#F9F9F9',color:QRbtn ==2? '#fff':'#666'}"
							@click="selectBtn(2)">
							<!-- 没有选中 显示 -->
							<view class="notselected" v-if="QRbtn != 2">

							</view>
							<!-- 选中之后显示 -->
							<image v-if="QRbtn == 2" src="../../../imgs/pay/activeIcon.png" mode=""
								style="width: 40rpx;height: 40rpx;">
							</image>
							<image v-if="QRbtn == 2" src="../../../imgs/pay/weChatActive.png" mode=""
								style="width: 40rpx;height: 32rpx;">
							</image>
							<image v-if="QRbtn != 2" src="../../../imgs/pay/weChatIcon.png" mode=""
								style="width: 40rpx;height: 32rpx;">
							</image>




							<view>微信支付</view>
						</view>
					</view>

				</view>

				<view class="tips" v-if="QRbtn ==1">
					截图保存并打开支付宝支付
				</view>
				<view class="tips" v-if="QRbtn == 2">
					截图保存并打开微信支付
				</view>
				<!-- <view class="wechatbtn" @click="paytype(1)">微信支付</view> -->
				<view v-if="QRbtn == 1" class="alipaybtn" @click="paytype(2)">打开支付宝</view>
				<view v-if="QRbtn == 2" class="wechatbtn" @click="paytype(1)">打开微信</view>
			</view>
		</u-popup>
		<u-popup v-model="tipsShow" mode='center' border-radius="14">
			<view class="toPayTips">
				<view class=""
					style="font-size: 36rpx;color: #333;font-weight: 500;text-align: center;margin-bottom: 40rpx;">
					温馨提醒
				</view>
				<view class="" style="font-size: 28rpx;color: #999;line-height: 28rpx;text-align: center;">
					如已截图请打开{{openPaytype == 2 ?"支付宝":'微信'}}扫码进行付款操作
					若没截图请返回截图后继续操作
				</view>
				<view class="" style="display: flex;justify-content: space-between;margin-top: 60rpx;">
					<view class="returnBtn" @click="tipsShow= false">
						返回截图
					</view>
					<view class="openBtn" @click='openAliorWechat()'
						:style="{backgroundColor: openPaytype == 2 ?'#1677ff':'#07c160'}">
						{{openPaytype == 2 ?"打开支付宝":'打开微信'}}
					</view>
				</view>
			</view>
		</u-popup>
		<view v-if="toPayShow">
			<web-view :webview-styles="webviewStyles" :src="toPay"></web-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			ordersn: {
				type: String,
				default: ''
			},
			orderDeatil: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				QRbtn: '',
				toPayShow: false,
				toPay: '',
				piclist: [],
				popUp: false,
				kefuphone: '',
				status: 0,
				creatTime: '',
				insurance: {},
				showText: false,
				payTypeShow: false,
				payQr: [], // 支付二维码s
				shouldpayMoney: 0,
				openPaytype: '',
				tipsShow: false

			}
		},
		mounted() {
			this.getpic()
			this.kefuphone = uni.getStorageSync('kefu')
			this.getOrder()

		},
		watch: {
			ordersn: {
				handler() {
					console.log(this.ordersn);
					if (this.ordersn) {
						this.getOrder()
					}
				}
			},
			// orderDeatil:{
			// 	handler(){

			// 		console.log(this.orderDeatil);
			// 		console.log();
			// 	this.showText =	this.orderDeatil.goods_id.split(',').includes(this.orderDeatil.item[0].goods_id.toString())
			// 	}
			// }
		},
		methods: {
			openAliorWechat() {

				if (this.openPaytype == 1) {
					window.location.href = "weixin://";
					// var ua = navigator.userAgent.toLowerCase();
					// if (ua.match(/MicroMessenger/i) == "micromessenger") {
					// 	window.location.href = "weixin://";
					// } else {
					// 	alert("请先安装微信！");
					// }



				}
				if (this.openPaytype == 2) {
					window.location.href = 'alipays://'
					// uni.showLoading({
					// 	title: '加载中'
					// })
					// this.$http('order.setStage', {
					// 	order_sn: this.currentSn,
					// 	check_stage: this.selectList.join(','),
					// 	canal: "app",
					// 	mold: "alipay_wap"
					// }).then(res => {
					// 	console.log(res, 'res');
					// 	if (res.code == 1) {
					// 		// #ifdef H5
					// 		window.location.href = res.data.order.data.expend.pay_info
					// 		//  #endif
					// 		// #ifdef APP-PLUS
					// 		// plus.runtime.openURL(res.data.order.data.expend.pay_info)
					// 		this.toPay = res.data.order.data.expend.pay_info
					// 		this.toPayShow = true

					// 		// #endif
					// 	} else {

					// 	}
					// 	uni.hideLoading()
					// })

				}

			},
			selectBtn(i) {
				this.QRbtn = i


			},
			paytype(num) {
				this.openPaytype = num
				this.tipsShow = true
			},
			// paytype(num) {
			// 	if (num == 1) {
			// 		// 微信支付
			// 	}
			// 	if (num == 2) {

			// 		uni.showLoading({
			// 			title: '加载中'
			// 		})
			// 		// 支付宝支付支付
			// 		this.$http('order.payBroken', {
			// 			order_sn: this.insurance.order_sn,
			// 			canal: "app",
			// 			mold: "alipay"
			// 		}).then(res => {
			// 			uni.hideLoading()
			// 			if (res.code == 1) {
			// 				// #ifdef H5

			// 				window.location.href = res.data.orderResult.expend.pay_info


			// 				//  #endif
			// 				// #ifdef APP-PLUS	
			// 				// plus.runtime.openURL(res.data.order.data.expend.pay_info)
			// 				this.toPay = res.data.orderResult.expend.pay_info
			// 				this.toPayShow = true

			// 				// #endif

			// 			}
			// 		})
			// 	}

			// },
			isWechat() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == "micromessenger") {
					return true;
				} else {
					return false;
				}
			},
			payOrder() {
				//支付订单
				// {{url}}/order/insurance_pay

				uni.showLoading({
					title: '加载中'
				})


				this.$http('order.payBroken', {
					order_sn: this.insurance.order_sn
				}).then(res => {

					uni.hideLoading()
					if (res.code == 1) {

						// #ifdef MP-ALIPAY
						my.tradePay({
							tradeNO: res.data.orderResult.body.trade_no,
							success: (res) => {
								if (res.resultCode == 9000) {
									this.getOrder()
								}
							},
							fail: (res) => {}
						});
						//  #endif
						// #ifdef APP-PLUS || H5

						if (this.isWechat()) {
							// 微信环境
							let payinfo = {
								partnerid: '1649453056',
								...res.data.orderResult
							}
							// // console.log(payinfo);
							WeixinJSBridge.invoke('getBrandWCPayRequest', {
									"appId": payinfo.appId, //公众号ID，由商户传入
									"timeStamp": payinfo.timeStamp.toString(), //时间戳，自1970年以来的秒数
									"nonceStr": payinfo.nonceStr, //随机串
									"package": payinfo.package,
									"signType": payinfo.signType, //微信签名方式：
									"paySign": payinfo.paySign, //微信签名
								},
								(res) => {
									// 支付成功
									if (res.err_msg == "get_brand_wcpay_request:ok") {
										// 使用以上方式判断前端返回,微信团队郑重提示：
										//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
										this.getOrder()
										// this.selectList = []
										// uni.hideLoading()
										// this.orderList = [];
										// this.getOrderDetail()
										// this.currentPage = 1;
										// this.lastPage = 1;
										// this.getOrderList();
									}
									// 支付过程中用户取消
									if (res.err_msg == "get_brand_wcpay_request:cancel") {

									}
									// 支付失败
									if (res.err_msg == "get_brand_wcpay_request:fail") {

									}
								});


						} else {
							// 其他环境
							if (this.selectList.length == 0) {

								return uni.showToast({
									title: '请选择要支付的账单分期',
									icon: 'none'
								})
							}
							// this.currentSn = sn
							// this.payTypeShow = true

							window.location.href = res.data.orderResult.expend.pay_info
						}
						// this.payTypeShow = true


						//  #endif

					}
				})







			},
			getOrder() {
				this.$http('order.BrokenOrder', {
					order_sn: this.ordersn
				}).then(res => {
					// console.log(res, 'res');
					if (res.code == 1) {
						this.insurance = res.data.item.insurance

						if (res.data.item.insurance) {
							this.creatTime = this.$u.timeFormat(res.data.item.insurance.createtime,
								'yyyy-mm-dd hh:MM:ss');
						}

						// this.status =	res.data.item.insurance.status 
						// this.goods_amount = res.data.item.insurance.goods_amount 
					}
				})
			},

			onCopy(code) {
				// orderDetailsicon
				uni.setClipboardData({
					data: code,
					success: (data) => {
						this.$u.toast('已复制到剪切板');
					}
				});




			},
			getpic() {
				this.$http('common.getPic', {

				}).then(res => {
					if (res.code === 1) {
						console.log(res);

						this.piclist = res.data.result.orderDetailsicon
						this.payQr = res.data.result.payQR

					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.toPayTips {
		width: 600rpx;
		// height: 460rpx;
		border-radius: 20rpx;
		// opacity: 1;

		background: #FFFFFF;
		box-sizing: border-box;
		padding: 48rpx;

		.returnBtn {
			width: 212rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 8rpx;
			opacity: 1;
			text-align: center;
			box-sizing: border-box;
			border: 2rpx solid #EBEBEB;
		}

		.openBtn {
			width: 212rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 8rpx;
			opacity: 1;
			text-align: center;
			box-sizing: border-box;
			border: 2rpx solid #EBEBEB;
			background-color: #3662EC;
			color: #fff;
		}

		.returnBtn:active {
			background-color: #f7f7f7;
		}

		.openBtn:active {
			// background-color: #3a6bff;
		}
	}

	.selectBtn {
		display: flex;
		justify-content: space-between;
		margin-top: 138rpx;

		.QRbtn {
			color: #666;
			width: 312rpx;
			height: 88rpx;
			border-radius: 120rpx;
			background: #F9F9F9;
			display: flex;
			align-items: center;
			justify-content: space-around;
			box-sizing: border-box;
			padding: 0 20rpx;
		}

		.notselected {
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
			border: 1rpx solid #CCCCCC;

		}

	}


	.orderContract {

		width: 100%;
		height: 1140rpx;
		padding: 46rpx;
		background-color: #fff;
		border-radius: 20rpx !important;


		.wechatbtn {

			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border: 2rpx solid #15ba11;

			margin-bottom: 20rpx;
			text-align: center;
			color: #fff;
			background-color: #15ba11;
			border-radius: 60rpx;
			margin-top: 70rpx;
		}

		.tips {
			position: absolute;
			top: 650rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 590rpx;
			height: 70rpx;
			border-radius: 40rpx;
			opacity: 1;
			color: #FF4747;
			text-align: center;
			line-height: 70rpx;
			background: rgba(255, 71, 71, 0.08);
		}

		.alipaybtn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border: 2rpx solid #1677ff;

			margin-bottom: 20rpx;
			text-align: center;
			color: #fff;
			background-color: #1677ff;
			border-radius: 60rpx;
			margin-top: 70rpx;
		}

		.wechatbtn:active {
			background-color: #07c160;
			color: #fff;

		}

		.alipaybtn:active {
			background-color: #1571f3;
			color: #fff;
		}

		.eBtn,
		.antBtn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border: 2rpx solid #fc6056;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			text-align: center;
			color: #fc6056;
		}

		// .wechatbtn {
		// 	width: 100%;
		// 	height: 80rpx;
		// 	line-height: 80rpx;
		// 	border: 2rpx solid #07c160;
		// 	border-radius: 10rpx;
		// 	margin-bottom: 20rpx;
		// 	text-align: center;
		// 	color: #07c160;
		// }

		// .alipaybtn {
		// 	width: 100%;
		// 	height: 80rpx;
		// 	line-height: 80rpx;
		// 	border: 2rpx solid #1677ff;
		// 	border-radius: 10rpx;
		// 	margin-bottom: 20rpx;
		// 	text-align: center;
		// 	color: #1677ff;
		// }

		.eBtn:active {
			background-color: gainsboro;

		}

		.antBtn:active {
			color: #fff;
			background-color: #fc6056;
		}
	}

	.notice-box {
		width: 710rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		// height: 200rpx;
		background: #fff;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding-bottom: 30rpx;

		// padding: 30rpx;
		.row1 {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #3D3D3D;
			padding: 20rpx;
			padding-bottom: 0;
		}

		.buy-btn {
			margin-top: 24rpx;
			width: 640rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: #FF4747;
			font-size: 28rpx;
			box-sizing: border-box;
			border: 2rpx solid #FF4747;
			border-radius: 100rpx;
		}

		.buy-btn:active {
			background-color: #fafafa;
		}

		.notice-box__head {
			font-size: 30rpx;

			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 80rpx;
			border-bottom: 1rpx solid #dfdfdf;
			padding: 0 25rpx;
		}

		.notice-box__content {
			padding: 25rpx;

			.self-pickup-box {
				width: 100%;

				.self-pickup--img {
					width: 200rpx;
					height: 200rpx;
					margin: 40rpx 0;
				}
			}
		}

		.notice-item--center {
			// margin-bottom: 10rpx;
		}

		.notice-item,
		.notice-item--center {
			height: 50rpx;
			align-items: center;

			.title {
				font-size: 24rpx;
				color: #999;
				text-align: justify;
				text-align-last: justify;
				text-justify: distribute-all-lines;
				width: 140rpx;
			}

			.detail {
				font-size: 24rpx;
				color: #333;
				flex: 1;
			}

			.copy-btn {
				height: 40rpx;
				width: 100rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				padding: 0;
				background: rgba(238, 238, 238, 1);
				font-size: 22rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-left: 30rpx;
			}
		}

		.notice-item--center {
			align-items: center;
		}
	}

	.center-content {
		width: 580rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.scroll-Y {
			width: 100%;
			height: 600rpx;
		}



		.center-content-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #555;
			margin-bottom: 34rpx;
		}

		.center-content-item {
			// display: flex;
			// justify-content: flex-start;
			margin-bottom: 28rpx;
			text-align: left;
			font-size: 26rpx;
			color: #888888;

			.title {
				font-weight: 700;
				color: #555;
			}

		}

		.Iknow {
			width: 70%;
			height: 80rpx;
			line-height: 80rpx;
			color: white;
			font-size: 30rpx;
			text-align: center;
			background-color: #FF4747;
			margin: 0 auto;
			border-radius: 40rpx;

		}

		.Iknow:active {
			background-color: #d03939;
		}
	}
</style>
